<template>
  <div class="market-panel">
    <div class="panel-data">
      <div class="title">二币行情</div>
      <el-row :gutter="10" align="bottom" type="flex">
        <el-col :lg="6" :sm="12">
          <span class="label">当前价:</span>
          <span class="data curPrice">{{ btcInfo.indexPrice || "--" }}</span>
        </el-col>
        <el-col :lg="6" :sm="12">
          <span class="label">今日涨幅:</span>
          <span class="data">100</span>
        </el-col>
        <el-col :lg="6" :sm="12">
          <span class="label">今日最低:</span>
          <span class="data">100</span>
        </el-col>
        <el-col :lg="6" :sm="12">
          <span class="label">今日最低:</span>
          <span class="data">100</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { channels, getBtcInfo } from "@/js/core";

export default {
  name: "MarketPanel",
  data() {
    return {
      btcInfo: getBtcInfo(),
      unsubKey: null,
    };
  },
  methods: {
    updateBtcInfo(news) {
      this.btcInfo = news;
    },
  },
  mounted() {
    this.unsubKey = channels.BTC_INFO.sub((news) => {
      this.updateBtcInfo(news);
    });
  },
  beforeDestroy() {
    channels.BTC_INFO.unsub(this.unsubKey);
  },
};
</script>

<style>
.market-panel {
  background-color: #409eff;
  font-size: 1rem;
  border-radius: 5px;
  color: #fff;
}

.market-panel > .panel-data {
  padding: 1.3rem;
  text-align: left;
}

.market-panel > .panel-data .label {
  font-size: 0.5rem;
  font-weight: 300;
  color: #e4dddd;
}

.market-panel > .panel-data .data:nth-child(1) {
  font-size: 2.8rem;
  font-weight: 800;
}

.market-panel > .panel-data .data {
  font-size: 1.5rem;
  font-weight: 800;
}

.market-panel > .panel-data .curPrice {
  font-size: 2.5rem;
  font-weight: 800;
}

.market-panel > .panel-data > .title {
  font-size: 0.5rem;
  color: #e4dddd;
  text-align: left;
}
</style>
